<template>
  <div class="loginPages">
    <div class="loginCenter">
      <div class="loginBox">
        <div class="mainList">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item prop="name">
              <el-input
                v-model.trim="ruleForm.username"
                autocomplete="off"
                placeholder="请输入用户名"
              >
                <template slot="prepend">
                  <i class="el-icon-s-custom"></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="pass">
              <el-input
                type="password"
                v-model.number="ruleForm.password"
                placeholder="请输入密码"
              >
                <template slot="prepend">
                  <i class="el-icon-lock"></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleForm)"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../../api/index";
export default {
  data() {
    var name = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      }
    };
    var pass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
    };
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: name, trigger: "blur" }],
        password: [{ validator: pass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(e) {
      let that = this;
      let username = e.username;
      let password = String(e.password);
      let params = { username, password };
      login(params).then((res) => {
        if (res.data.status == 0) {
          sessionStorage.setItem("userId", res.data.data.roleList[0].id);
          sessionStorage.setItem("token", res.data.data.token);
          sessionStorage.setItem("username", e.username);
          that.$router.push("/home/mould");
        } else {
          that.$message.error(res.data.message);
        }
      });
      // localStorage.setItem('Ai_token','123456')
      // this.$router.push('/home/mould')
    },
  },
};
</script>

<style lang="less" scoped>
.loginPages {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #0a3246;
  background-position: 50%;
  background-repeat: no-repeat;
  background-image: url("../../assets/images/login/login_bac.png");
  background-size: 100% 100%;
  .loginCenter {
    width: 1000px;
    height: 992px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    .loginBox {
      // width: 500px;
      // height: 400px;
      // background-color: #fff;
      // margin: auto;
      // border-radius: 2px;
      position: absolute;
      left: 160.5px;
      top: 237px;
      width: 679px;
      height: 514px;
      max-width: 100%;
      background-image: url("../../assets/images/login/login_table.png");
      .mainList {
        position: absolute;
        top: 179px;
        left: 371px;
        width: 243px;
        box-sizing: border-box;
        /deep/.el-input-group {
          border: 1px solid #27adf9;
        }
        /deep/.el-input-group__prepend {
          background-color: #0d486c;
          color: #1bd6fd;
          font-size: 26px;
          border: 0;
          border-radius: 0;
          padding: 0 10px;
        }
        /deep/.el-input__inner {
          background-color: transparent;
          border-radius: 0;
          border: none;
          color: #fff;
          font-size: 16px;
          outline: 0;
        }
        /deep/.el-form-item__content {
          margin-left: 0px !important;
        }
        /deep/.el-button--primary {
          color: #00cef0;
          background-color: #072733;
          border-color: #00cef0;
        }
        /deep/.el-button {
          width: 243px;
          height: 41px;
          margin-top: 8px;
          font-size: 19px;
        }
      }
    }
  }
}
</style>
